<template>
	<div
		class="base-switch-group bg-bg-1 rounded-lg flex items-center"
		:class="size === 'large' ? 'h-9' : 'h-8'">
		<div
			v-for="(item, index) in data"
			:key="item.id"
			class="h-full rounded-lg flex items-center cursor-pointer transition-all duration-300"
			:class="[
				modelValue === item.id ? 'bg-primary text-t-1 px-3' : 'text-t-3',
				{
					'ml-3': !(modelValue === item.id && index === 0),
					'mr-3': index === data.length - 1 && modelValue !== item.id
				}
			]"
			@click="onChange(item.id)">
			<base-icon
				:name="item.icon"
				class="app-text-react"
				:class="size === 'large' ? 'text-[26px]' : 'text-[24px]'"></base-icon>
			<base-text
				v-show="item.id === modelValue"
				:text="item.text"
				:textT="item.textT"
				class="ml-1 app-font-bold" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { SwitchGroupData, SwitchGroupSize } from './types'
import BaseIcon from '@/components/base/icon/index.vue'
import BaseText from '@/components/base/text/index.vue'

defineProps({
	modelValue: {
		type: String,
		default: ''
	},
	size: {
		type: String as PropType<SwitchGroupSize>,
		default: ''
	},
	data: {
		type: Array as PropType<Array<SwitchGroupData>>,
		default: () => []
	}
})

const emits = defineEmits(['update:modelValue', 'change'])

const onChange = (id: string) => {
	emits('update:modelValue', id)
	emits('change', id)
}
</script>
